﻿@using System.ComponentModel.DataAnnotations
<EditForm Model="@_model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudGrid>
        <MudItem xs="12" sm="7">
            <MudCard>
                <MudCardContent>
                    <MudTextField Label="First name" HelperText="Max. 8 characters"
                                  @bind-Value="_model.Username" For="@(() => _model.Username)" />
                    <MudTextField Label="Email" Class="mt-3"
                                  @bind-Value="_model.Email" For="@(() => _model.Email)" />
                    <MudTextField Label="Password" HelperText="Choose a strong password" Class="mt-3"
                                  @bind-Value="_model.Password" For="@(() => _model.Password)" InputType="InputType.Password" />
                    <MudTextField Label="Password" HelperText="Repeat the password" Class="mt-3"
                                  @bind-Value="_model.Password2" For="@(() => _model.Password2)" InputType="InputType.Password" />
                </MudCardContent>
                <MudCardActions>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Register</MudButton>
                </MudCardActions>
            </MudCard>
        </MudItem>
        <MudItem xs="12" sm="5">
            <MudPaper Class="pa-4 mud-height-full">
                <MudText Typo="Typo.subtitle2">Validation Summary</MudText>
                @if (_success)
                {
                    <MudText Color="Color.Success">Success</MudText>
                }
                else
                {
                    <MudText Color="@Color.Error">
                        <ValidationSummary />
                    </MudText>
                }
            </MudPaper>
        </MudItem>
        <MudItem xs="12">
            <MudText Typo="Typo.body2" Align="Align.Center">
                Fill out the form correctly to see the success message.
            </MudText>
        </MudItem>
    </MudGrid>
</EditForm>


@code {
    private bool _success;
    private readonly RegisterAccountForm _model = new();

    public class RegisterAccountForm
    {
        [Required]
        [StringLength(8, ErrorMessage = "Name length can't be more than 8.")]
        public string? Username { get; set; }

        [Required]
        [EmailAddress]
        public string? Email { get; set; }

        [Required]
        [StringLength(30, ErrorMessage = "Password must be at least 8 characters long.", MinimumLength = 8)]
        public string? Password { get; set; }

        [Required]
        [Compare(nameof(Password))]
        public string? Password2 { get; set; }

    }

    private void OnValidSubmit(EditContext context)
    {
        _success = true;
        StateHasChanged();
    }

}